<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/15
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>渠道管理</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
        <script src="${path}/resources/dist/js/vue.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
        <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    </head>
    <body>
        <div id="app">
            <template>
            <el-form :inline="true" :model="ChannelSelect" class="user-search">
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-plus" @click="addFlag=true">添加</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="channelList" stripe border>
                <el-table-column prop="fname" label="一级分类" width=150px>
                </el-table-column>
                <el-table-column prop="sname" label="二级分类" width=150px>
                </el-table-column>
                <el-table-column prop="channelNum" label="渠道号" width=300px></el-table-column>
                <el-table-column prop="downloadAdress" label="渠道下载地址" width=300px></el-table-column>
                <el-table-column prop="productName" label="产品名称" width=200px></el-table-column>
                <el-table-column prop="showName" label="显示名称" width=150px></el-table-column>
                <el-table-column prop="ctime" label="创建时间" width=200px></el-table-column>
                <el-table-column label="操作" width="150px">
                    <template slot-scope="scope">
                        <el-button type="primary" round size="small" @click="deitAdress(scope.row)">添加下載地址</el-button>
                        <el-button type="danger" round size="small" @click="deteleAdress(scope.row)">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="添加渠道" :visible.sync="addFlag" :before-close="handleClose">
                <el-form label-width="80px" :model="addList">
                    <el-row>
                        <el-col :span="10" :offset="3">
                            <el-form-item label="产品名称">
                                <el-input type="text" v-model="addList.productName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="10" :offset="3">
                            <el-form-item label="显示名称">
                                <template>
                                    <el-input type="text" v-model="addList.showName"></el-input>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="10" :offset="3">
                            <el-form-item label="地区">
                                <el-input text="textarea" v-model="addList.area"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10" :offset="3">
                            <el-form-item label="平台">
                                <template>
                                    <el-select v-model="addList.platform" placeholder="请选择">
                                        <el-option label="ALL" :value=0></el-option>
                                        <el-option label="IOS" :value=1></el-option>
                                        <el-option label="Android" :value=2></el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="10" :offset="3">
                            <el-form-item label="一级分类">
                                <template>
                                    <el-select v-model="addList.cid" placeholder="请选择" @visible-change="FsortChange"
                                               @change="sonChange">
                                        <el-option
                                                v-for="item in channelSortList"
                                                :label="item.cname"
                                                :value="item.cid">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10" :offset="3">
                            <el-form-item label="二级分类">
                                <template>
                                    <el-select v-model="addList.sid">
                                        <el-option v-for="item in channelSort"
                                                   :label="item.cname"
                                                   :value="item.cid">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="10" :offset="3">
                            <el-form-item label="备注">
                                <el-input text="textarea" v-model="addList.des"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span>
                    <el-button @click="addFlag = false">关闭</el-button>
                    <el-button @click="addChannel">提交</el-button>
                </span>
            </el-dialog>
            <%--添加下載地址--%>
            <el-dialog title="添加下载地址" :visible.sync="addAdressFlag" :before-close="handleClose">
                <el-form label-width="80px" :model="addownloadAdress">
                    <el-row>
                        <el-col :span="10" :offset="3">
                            <el-form-item label="下载地址">
                                <el-input type="text" v-model="addownloadAdress.downloadAdress"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span>
                    <el-button @click="addAdressFlag = false">关闭</el-button>
                    <el-button @click="addAdress">提交</el-button>
                </span>
            </el-dialog>
            <%--删除渠道--%>
            <el-dialog title="删除渠道" :visible.sync="deleteFlag" :before-close="handleClose">
                <span>
                    <el-button @click=" deleteFlag = false">取消</el-button>
                    <el-button @click="detelethisAdress">确定删除</el-button>
                </span>
            </el-dialog>
            <%--分页查询--%>
            <el-pagination background @current-change="currentChange" @size-change="sizeChange"
                           layout="sizes, prev, pager, next, jumper"
                           :page-sizes="[3, 6, 9]" :total="pageInfo.total" :page-size="pageInfo.pageNum"
                           :current-page="pageInfo.page">
            </el-pagination>
            </template>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    addFlag: false,
                    addAdressFlag: false,
                    deleteFlag:false,
                    ChannelSelect: {
                        channelNum: "",
                        nowPage: 1,
                        pageSize: 3,
                        method: "showAllChannel",
                        total: 3
                    },
                    pageInfo: {
                        nowPage: 1,
                        pageSize: 2,
                        total: 3
                    },
                    addList: {
                        channelNum: "",
                        productName: "",
                        showName: "",
                        area: "",
                        platform: "",
                        sid: '',
                        cid: '',
                        des: ''
                    },
                    addownloadAdress: {
                        downloadAdress: "",
                        id: 1,
                    },
                    deleteList:{
                        id:1,
                    },
                    message: "",
                    channelList: [],
                    channelSortList: [],
                    channelSort: []
                },
                methods: {
                    search() {
                        var data = window.Qs.stringify(this.ChannelSelect);
                        var vm = this
                        axios.post("/channel.do", data).then(response => {
                            vm.channelList = response.data.dataList;
                            vm.pageInfo = {
                                pageSize: response.data.pageNum,// 每页显示的数据量
                                nowPage: response.data.nowPage, // 当前页
                                total: response.data.totalNum // 总条数
                            };
                        })
                    },
                    //添加下载地址
                    deitAdress(row) {
                        this.addAdressFlag = true;
                        this.addownloadAdress = {
                            id: row.id,
                            downloadAdress: row.downloadAdress
                        }
                    },
                    addAdress() {
                        let vm = this;
                        var data = window.Qs.stringify(this.addownloadAdress);
                        axios({
                            url:"/channel.do",
                            method:"post",
                            data:"method=addAdress&"+data
                        }).then(function (response) {
                            if (response.data=="添加地址成功"){
                                alert("添加成功");
                                vm.addAdressFlag = false;
                                vm.search();
                            }
                        })
                    },


                    //添加渠道
                    addChannel() {
                        let vm = this;
                        var data = window.Qs.stringify(this.addList);
                        axios({
                            url: "/channel.do",
                            method: "post",
                            data: "method=addChannel&" + data,
                        }).then(function (response) {
                            if (response.data == "添加成功") {
                                alert("添加成功")
                                vm.addFlag = false;
                                vm.search()
                            }
                        })

                    },
                    //删除渠道
                    deteleAdress(row){
                        this.deleteFlag = true;
                        this.deleteList={
                            id:row.id
                        }
                    },
                    detelethisAdress(){
                        let vm = this;
                        var data = window.Qs.stringify(this.deleteList);
                        axios({
                            url:"/channel.do",
                            method:"post",
                            data:"method=deteleChannel&"+data
                        }).then(function (response) {
                            if (response.data=="删除成功"){
                                vm.deleteFlag = false;
                                vm.search()
                            }
                        })
                    },
                    sonChange(value) {
                        let vm = this;
                        axios.post("${path}/channelSort.do?method=showALLChannelS&fid=" + value).then(response => {
                            if (response.data == "") {
                                console.log(response.data)
                                vm.ChannelSelect.channelNum = null;
                                vm.channelSort = null;
                            } else {
                                console.log(response.data)
                                vm.channelSort = response.data;
                                vm.ChannelSelect.stypeId = vm.channelSort[0].cid
                            }
                            // this.channelSort = response.data;
                        });
                    },

                    FsortChange() {
                        axios.post("${path}/channelSort.do?method=showALLChannelf").then(response => {
                            this.channelSortList = response.data;
                        });
                    },

                    currentChange(val) {// 当前页发生变化时触发的事件
                        this.ChannelSelect.nowPage = val;
                        this.search();
                    }, sizeChange(val) {// 每页显示的数据量变化时触发的事件
                        this.ChannelSelect.pageSize = val;
                        this.search();
                    },
                    handleClose(done) {
                        this.$confirm('确认关闭？')
                            .then(_ => {
                                done();
                            })
                            .catch(_ => {
                            });
                    },
                },
                mounted() {
                    this.search();
                    let vm = this;
                    axios({
                        url: "/channelSort.do",
                        method: "post",
                        data: "method=showALLChannelf"
                    }).then(function (response) {
                        vm.channelSortList = response.data;
                    })
                },

            })
        </script>
    </body>
</html>
